import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import DatePicker from "components/DatePicker";
import LocaleProvider from "components/LocaleProvider";

<Meta title="Components/DatePicker" component={DatePicker} />

# DatePicker

## Props

<Props of={DatePicker} />

## Examples

### Basic

Basic usages for `DatePicker` component.

<Preview>
  <Story name="basic datePicker">
    <LocaleProvider>
      <div>
        <div style={{ padding: 20 }}>
          <label style={{ display: "inline-block", width: 100 }}>Date: </label>
          <DatePicker name="start" dateFormat={"Y-m-d H:i:S"} />
        </div>
        <div style={{ padding: 20 }}>
          <label style={{ display: "inline-block", width: 100 }}>Enable Time: </label>
          <DatePicker name="start" enableTime dateFormat={"Y-m-d H:i:S"} />
        </div>
        <div style={{ padding: 20 }}>
          <label style={{ display: "inline-block", width: 100 }}>Time Range: </label>
          <DatePicker name="start" mode="range" dateFormat={"Y-m-d H:i:S"} />
        </div>
      </div>
    </LocaleProvider>
  </Story>
</Preview>
